<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17 疫情防控三分化分高德引擎</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=4d23df7f770e3f3b50f6378ef605a67f"></script>
    <script src="../lib/jQuery/jquery-3.6.0.js"></script>
    <script src='../lib/gcoord.js'></script>
    <script src='js/equipmentMapUtil.js'></script>
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<table>
    <tr>
        <td>城市：</td>
        <td><input id='cityId' type='text' value='北京'/></td>
        <td>小区：</td>
        <td><input type="text" value="故宫博物院" id="areaId"></td>
        <td>
            <button id='showBtn'>显示</button>
        </td>
    </tr>
</table>
<div id='map'></div>
<script>
    const map = new AMap.Map('map', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [120.031181, 30.272264] //初始化地图中心点
    });

    const roadSearch = new AMap.RoadInfoSearch({ //构造地点查询类
        pageSize: 5,
        pageIndex: 1,
        city: '0571'
    });
    roadSearch.roadInfoSearchByRoadName('文一西路', (status, result) => {
        console.log(status, result);
    });
    /**
     * 绘制区域
     * @param {string} city 城市名
     * @param {string} house 小区名
     */
    let showArea = function (city, house) {
        const params = {
            house,
            city,
            ak: '4d23df7f770e3f3b50f6378ef605a67f'
        };

        queryHouseOfGaoDe(params, ({message, results}) => {
            if (message === 'ok') {
                let houses = results;
                if (houses && houses.length > 0) {
                    let house = houses[0];
                    queryHouseOutline(house.uid, function (houseOutline) {
                        const geo = houseOutline.content.geo;
                        if (!geo) {
                            let location = house.location;
                            let point = new BMap.Point(location.lng, location.lat);
                            map.centerAndZoom(point, 19);
                            let marker = new BMap.Marker(point);
                            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                            map.addOverlay(marker);
                        } else {
                            let geoObj = parseGeo(geo);
                            //var bounds = coordinateToPoints(geoObj.bound);
                            // console.log(geoObj.points);


                            // let arrStr = getNewPoints(geoObj.points, halfX, halfY, 50);
                            // console.log(arrStr);
                            //边界点
                            // let points = coordinateToPoints(map, geoObj.points);
                            // preventionArea(community);  // 防范区
                            sealedArea(geoObj.points, 50);  // 管控区
                            // console.log(geoObj.points);
                            controlArea(geoObj.points); // 封控区
                        }
                    });
                }
            }
        });
    };

    let getCenterCoordinate = (points) => {
        const coordinate_X = [];
        const coordinate_Y = [];

        points.split(';').forEach(item => {
            item.split(',').forEach((coordinate, index) => {
                if (index === 0) { // x
                    return coordinate_X.push(Number(coordinate));
                } else { // y
                    return coordinate_Y.push(Number(coordinate));
                }
            });
        });
        const halfX = (Math.max(...coordinate_X) + Math.min(...coordinate_X)) / 2;
        const halfY = (Math.max(...coordinate_Y) + Math.min(...coordinate_Y)) / 2;
        return {
            halfX,
            halfY
        };
    };

    let getNewPoints = (points, halfX, halfY, metre) => {
        return points.split(';').map(item => {
            return item.split(',').map((coordinate, index) => {
                if (index === 0) { // x
                    if (Number(coordinate) >= halfX) {
                        return Number(coordinate) + metre;
                    } else {
                        return Number(coordinate) - metre;
                    }
                } else { // y
                    if (Number(coordinate) >= halfY) {
                        return Number(coordinate) + metre;
                    } else {
                        return Number(coordinate) - metre;
                    }
                }
            }).toString();
        }).reduce((pre, cur, index, arr) => {
            if (index === arr.length - 1) {
                return pre + cur;
            } else {
                return pre + cur + ';';
            }
        }, '');
    };

    let controlArea = (points) => {
        let ply = new BMap.Polygon(coordinateToPoints(map, points), {
            strokeWeight: 2,
            strokeColor: '#F01B2D',
            strokeOpacity: 0.9,
            fillColor: 'rgba(255,235,204,0.37)'
        }); //建立多边形覆盖物
        map.addOverlay(ply); //添加覆盖物
        map.setViewport(ply.getPath()); //调整视野
    };

    let sealedArea = (points, metre) => {
        const {halfX, halfY} = getCenterCoordinate(points);
        let ply = new BMap.Polygon(coordinateToPoints(map, getNewPoints(points, halfX, halfY, metre)), {
            strokeWeight: 2,
            strokeColor: '#1c5eef',
            strokeOpacity: 0.9,
            fillColor: '#add6f1'
        }); //建立多边形覆盖物
        map.addOverlay(ply); //添加覆盖物
    };

    let preventionArea = (points) => {
        const {halfX, halfY} = getCenterCoordinate(points);
        let ply = new BMap.Polygon(coordinateToPoints(map, points), {
            strokeWeight: 2,
            strokeColor: '#047f20',
            strokeOpacity: 0.9,
            fillColor: 'rgba(174,250,175,0.38)'
        }); //建立多边形覆盖物
        map.addOverlay(ply); //添加覆盖物
    };

    // console.log($('#areaId').val());
    $('#areaId').val().split(',').forEach(item => {
        showArea($('#cityId').val(), item);
    });

    //

    $('#showBtn').click(function () {
        // map.clearOverlays();
        $('#areaId').val().split(',').forEach(item => {
            showArea($('#cityId').val(), item);
        });
    });
</script>
</body>
</html>